<template>
  <div class="chart" ref="chart"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.initChart(this.chartData)
  },
  methods: {
    initChart(chartData) {
      this.chartInstance = echarts.init(this.$refs.chart)
      const xAxis = chartData.xAxis.data
      const seriesData = chartData.data
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '0%',
          right: '5%',
          bottom: '0%',
          top: '20%',
          containLabel: true
        },
        legend: {
          show: false
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisLabel: {
            textStyle: {
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '14px',
              color: '#FFFFFF'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1E4469'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          boundaryGap: true
        },
        yAxis: {
          type: 'value',
          name: chartData.yAxis.name,
          nameTextStyle: {
            padding: [0, 0, -5, 45],
            fontFamily: 'MicrosoftYaHeiUI',
            fontSize: '12px',
            color: '#FFFFFF'
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '12px',
              color: '#FFFFFF'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#82C4E5'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1E4469'
            }
          }
        },
        series: [
          {
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: 'rgb(55, 200, 143)',
              borderColor: '#fff',
              borderWidth: 1
            },
            lineStyle: {
              normal: {
                color: 'rgb(55, 200, 143)',
                shadowColor: 'rgba(55, 200, 143, .4)',
                shadowBlur: 8,
                shadowOffsetY: 10,
                shadowOffsetX: 0
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(55, 200, 143, .4)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(55, 200, 143, 0)'
                  }
                ])
              }
            },
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style scoped>
.chart {
  height: 100%;
}
</style>
